<template>
  <div style="height: 100%">
    <!--工作区-->
    <el-container ref="listWarp" style="height: 100%; background-color: #fff">
      <el-header class="toolbar-wap" style="height: 45px; border-bottom: 0px">
        <span style="line-height: 45px;font-size: 16px;float: left;margin-left: 10px;font-weight: bold;">系统参数配置</span>
      </el-header>
      <el-main class="page-main" style="padding: 0 20px" v-loading="Loading">
        <div style="margin-left:100px;">
          <div style="height:100%;line-height:40px;">晚归时间</div>
          <el-row :gutter="20" v-for="(item, key) in systemDate" :key="key" style="margin-bottom:30px;">
            <el-col :span="4">
              <el-checkbox style="height:100%;line-height:40px;" v-if="item.type == 'check'" v-model="item.flag">{{item.name}}</el-checkbox>
              <div style="height:100%;line-height:40px;" v-else>{{item.name}}</div>
            </el-col>
            <el-col :span="12">
              <div v-if="item.type == 'check'">
                <el-time-picker size="small" style="width:180px;" v-model="item.data1" placeholder="任意时间点" @change="selectTime(item)"></el-time-picker>
                <div class="dateEditor">至</div>
                <el-time-picker size="small" style="width:180px;" v-model="item.data2" placeholder="任意时间点" @change="selectTime(item)"></el-time-picker>
                <!-- <div>{{item.comment}}</div> -->
              </div>
              <div style="display:flex;" v-if="item.type == 'number'">
                <el-input size="small" style="width:200px;" placeholder="小时" v-model="item.value" clearable></el-input>
                <!-- <div style="height:100%;line-height:40px;margin-left:40px;">{{item.comment}}</div> -->
              </div>
            </el-col>
          </el-row>
        </div>
        <tool-button text="保存设置" icon="itr_save" style="float: left; margin-left: 30%" type="primary" @buttonClick="toolButtonClick" />
      </el-main>
    </el-container>
  </div>
</template>
<script>
import toolButton from "@/itsoftUI/components/toolbar/toolbutton";
import { getPremission } from "@/itsoftUI/auth/permission";
import { settingApi } from "@/api/system/setting";
export default {
  name: "settingList",
  components: { toolButton },
  data() {
    return {
      Loading: false,
      checked: false,
      systemDate: [],
      input: "",
      toolButtons: [{ text: "保存设置", auth: "070601" }],
      value1: new Date(2016, 9, 10, 18, 40),
    };
  },
  methods: {
    toolButtonClick(text) {
      switch (text) {
        case "保存设置":
          let edit = this.toolButtons.filter((item) => item.auth === "070601");
          if (edit && edit.length > 0 && edit[0].disabled) return false;
          this.saveData();
          break;
      }
    },
    getList() {
      this.Loading = true;
      settingApi.List().then((res) => {
        if (res.errorCode === 0) {
          res.data.forEach((item) => {
            let name = item.name.replace("晚归时间", "");
            this.$set(item, "name", name);
            if (item.value * 1) {
              this.$set(item, "flag", true);
            } else {
              this.$set(item, "flag", false);
            }

            if (item.dataItem && item.dataItem.length) {
              let itemData = item.dataItem.replace(/\[|\"|\'|\]/g, "");
              let datas = itemData.split(",");
              datas.forEach((val, key) => {
                let data = "2020,11,20," + val;
                this.$set(item, `data${key + 1}`, new Date(data));
              });
            } else {
              // this.$set(item, "data", [
              //   new Date(2016, 9, 10, 0, 0, 0),
              //   new Date(2016, 9, 11, 0, 0, 0),
              // ]);
            }
          });
          this.systemDate = res.data;
          this.Loading = false;
        }
      });
    },
    timePicker(item) {
      console.log("item", item);
    },
    selectTime(item) {
      console.log("item", item);
    },
    saveData() {
      this.Loading = true;
      let data = [];
      let that = this;
      this.systemDate.forEach((item) => {
        let obj = {};
        obj.id = item.id;
        obj.code = item.code;
        if (item.type == "check") {
          let arr = [];
          if (item.data1 || item.data2) {
            for (let key = 0; key < 2; key++) {
              let date = item[`data${key + 1}`];
              if (date) {
                var hour = date.getHours();
                var minute = date.getMinutes();
                minute = minute < 10 ? "0" + minute : minute;
                var second = date.getSeconds();
                second = second < 10 ? "0" + second : second;
                arr[key] = `${hour}:${minute}:${second}`;
              }
            }
            obj.dataItem = arr;
          } else {
            obj.dataItem = "";
          }
          obj.value = item.flag ? "1" : "0";
        } else if (item.type == "number") {
          obj.value = item.value;
        }
        data.push(obj);
      });
      settingApi.Batch(JSON.stringify(data)).then((res) => {
        if (res.errorCode === 0) {
          this.Loading = false;
          this.$message.success("提交成功");
          this.getList();
        }
      });
    },
    switchTimeFormat(time) {
      const dateTime = new Date(time);
      const hour = dateTime.getHours();
      const minute = dateTime.getMinutes();
      const second = dateTime.getSeconds();
      return `${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(
        second
      )}`;
    },
    addZero(v) {
      return v < 10 ? "0" + v : v;
    },
  },
  created() {
    this.getList();
    //功能权限
    getPremission(this.toolButtons);
  },
};
</script>

<style lang="scss" scoped>
.mainwarp {
  width: 100%;
  height: auto;
  .group-title {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    line-height: 40px;
    border-bottom: 1px solid #e3e8ee;
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }
  .setting-item {
    line-height: 30px;
    float: left;
    overflow: hidden;
    padding: 10px 0;
    .title {
      font-size: 14px;
      float: left;
      margin-left: 10px;
    }
    .input {
      margin: 0 20px;
      float: left;
    }
    .msg {
      font-size: 13px;
      color: #999999;
      float: left;
      width: 100%;
      margin-left: 10px;
    }
    .edit {
      float: right;
      color: #999999;
      font-size: 12px;
      margin-right: 10px;
    }
    &:hover {
      background-color: #f7f7f7;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }
  }
}
.dateEditor {
  display: inline-block;
  height: 100%;
  padding: 0 5px;
  margin: 0;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  width: 5%;
  color: #303133;
}
</style>
